<template>
  <div id="addClient">
    <table>
      <tr>
        <td>客户编号</td>
        <td><el-input v-model="client.clientCode" @input="checkClient"></el-input>
        </td>
        <td>客户名称</td>
        <td><el-input v-model="client.clientName"></el-input></td>
      </tr>
      <!-- <tr style="margin-top: -60px;">
        <td> -->
      <font ref="clientCheck" style="font-size: 12px;position:relative; left: 80px;"></font>
      <!-- </td>
      </tr> -->
      <br>
      <tr>
        <td>客户类别</td>
        <td><el-select v-model="client.clientTypeId" placeholder="类别">
            <el-option label="区域一" :value="1"></el-option>
            <el-option label="区域二" :value="2"></el-option>
          </el-select></td>
        <td>客户等级</td>
        <td><el-select v-model="client.clientLevelId">
            <el-option label="区域一" :value="1"></el-option>
            <el-option label="区域二" :value="2"></el-option>
          </el-select></td>
      </tr>
      <br>
      <tr>
        <td>期初应收款</td>
        <td><el-input v-model="client.shouldPay"></el-input></td>
        <td>期初预收款</td>
        <td><el-input v-model="client.wishPay"></el-input></td>
      </tr>
      <br>
      <tr>
        <td>业务员</td>
        <td><el-select v-model="client.employeeId">
            <el-option label="区域一" :value="1"></el-option>
            <el-option label="区域二" :value="2"></el-option>
          </el-select></td>
        <td>地区</td>
        <td><el-select v-model="client.areaId">
            <el-option label="区域一" :value="1"></el-option>
            <el-option label="区域二" :value="2"></el-option>
          </el-select></td>
      </tr>
      <br>
    </table>

    <p>联系人信息</p>
    <br>

    <table id="contact">
      <tr>
        <th></th>
        <th>联系人</th>
        <th>电话</th>
        <th>邮箱</th>
        <th>联系地址</th>
      </tr>
      <tr v-for="(contact, index) in contactList" :key="index">
        <td style="width: 120px;padding-left: 10px;">
          <el-button size="mini" @click="addRow"><i class="el-icon-circle-plus-outline"></i></el-button>
          <el-button size="mini" @click="reduceRow"><i class="el-icon-remove-outline"></i></el-button>
        </td>
        <td style="padding-left: 20px;"><el-input v-model="contact.contactName" size="small"
            style="width: 120px;"></el-input></td>
        <td style="padding-left: 20px;"><el-input v-model="contact.mobile" size="small"
            style="width: 120px;"></el-input></td>
        <td style="padding-left: 20px;"><el-input v-model="contact.email" size="small" style="width: 120px;"></el-input>
        </td>
        <td style="padding-left: 20px;"><el-input v-model="contact.contactAddress" size="small"
            style="width: 120px;"></el-input></td>
      </tr>
    </table>
    <br>
    <el-input style="width: 600px;" type="textarea" placeholder="备注" v-model="client.remark"></el-input>
    <el-button @click="addClient" type="primary" style="position: absolute;bottom: 20px;right: 100px;width: 70px;"
      :disabled="saveFlag">保存</el-button>
  </div>
</template>

<script>
export default {
  name: 'AddClient',
  data() {
    return {
      client: {
        clientCode: '',
        clientName: '',
        clientTypeId: '',
        clientLevelId: '',
        shouldPay: '',
        wishPay: '',
        employeeId: '',
        areaId: '',
        // contactAddress: '',
        remark: ''
      },
      contactList: [
        {
          contactName: '',
          mobile: '',
          email: '',
          contactAddress: '',
        }
      ],
      saveFlag: false
    }
  },
  methods: {
    addRow() {
      this.contactList.push({ contactName: '', mobile: '', email: '', contactAddress: '' })
    },
    reduceRow() {
      if (this.contactList.length > 1) {
        this.contactList.pop()
      }
    },
    addClient() {
      //手机号正则
      const mobileRegix = /^1[3-9]\d{9}$/
      //金额正则
      const moneyRegix = /^\d+(\.\d{1,2})?$/

      if (this.client.clientCode == '') {
        this.errorMessage("请填写客户编号")
        return
      }
      if (this.client.clientName == '') {
        this.errorMessage("请填写客户名称")
        return
      }
      if (this.client.shouldPay !== '') {
        if (!moneyRegix.test(this.client.shouldPay)) {
          this.errorMessage("期初应收款格式为两位小数或整数")
          return
        }
      }
      if (this.client.wishPay !== '') {
        if (!moneyRegix.test(this.client.wishPay)) {
          this.errorMessage("期初预收款格式为两位小数或整数")
          return
        }
      }
      for (const contact of this.contactList) {
        if (contact.contactName == '') {
          this.errorMessage("请填写联系人姓名");
          return;
        }
        if (contact.mobile == '') {
          this.errorMessage("请填写联系电话");
          return;
        }
        if (!mobileRegix.test(contact.mobile)) {
          this.errorMessage("请填写正确的电话");
          return;
        }
      }
      const formdata = new FormData()
      formdata.append('client', JSON.stringify(this.client))
      formdata.append("listStr", JSON.stringify(this.contactList))
      this.axios.post('/info/client/addClient',
        formdata
      ).then(rs => {
        if (rs.data.code = 200) {
          this.successMessage("添加成功")
          this.client = {}
          this.contactList = [
            {
              contactName: '',
              mobile: '',
              email: '',
              contactAddress: '',
            }]
          this.updateValue()
        }
      })
    },
    successMessage(msg) {
      this.$message({
        message: msg,
        type: 'success'
      });
    },
    errorMessage(msg) {
      this.$message({
        message: msg
        ,
        type: 'error'
      })
    },
    checkClient() {
      this.axios.get("/info/client/checkClient", {
        params: {
          clientCode: this.client.clientCode
        }
      }).then(rs => {
        if (rs.data.client != null) {
          this.$refs.clientCheck.innerHTML = "客户已存在"
          this.$refs.clientCheck.style.color = "red"
          this.saveFlag = true
        } else {
          this.$refs.clientCheck.innerHTML = ""
          this.saveFlag = false
        }
      })
    },
    updateValue() {
      this.$emit('update:dialogFormVisible', false);
    }
  }
}
</script>

<style scoped>
#addClient {
  width: 100%;
  height: 450px;
  overflow: scroll;
  /* background-color: pink; */
}

#contact {
  width: 90%;
  margin: auto;
  border-collapse: collapse;
  color: #707276;
}

#contact th,
#contact td {
  border: 1px #c0c4cc solid;
  height: 35px;
  min-width: 30px;
}

p {
  color: #4b4a4a;
  font-size: 18px;

}

.el-input {
  width: 240px;
}

.el-button {
  width: 40px;
  margin-left: 0px;
}

table td :not([id=contact]) {
  text-align: left;
  padding-right: 10px;
  /* padding-top: 10px;
  padding-bottom: 10px; */
}

td:nth-child(odd) {
  text-align: center;
  padding-right: 10px;
}
</style>